<template>
	<div>
		<div class="w-1200px header">
			<el-row :gutter="20">
				<el-col :span="16" class="h-100%">
					<el-card class="h-100% h-360px" shadow="hover">
						<div class="block text-center">
							<el-carousel height="350px">
								<el-carousel-item
									class="" v-for="item in state.carouselList" :key="item">
									<el-image class="w-100% h-100%" :src="item.path" fit="scale-down" />
								</el-carousel-item>
							</el-carousel>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8" class="h-360px">
					<el-card class="h-100% h-100%" shadow="hover">
						<template #header>
							<div class="card-header">
								<span>用户快捷信息</span>
							</div>
						</template>
						<div v-if="UserLogin.isLogin" class="top">
							<div class="user-info">
								<el-row :gutter="20">
									<el-col :span="5">
										<el-avatar :size="50" :src="state.userInfo.profile" />
									</el-col>
									<el-col :span="19">
										<h1>账号：{{ state.userInfo.userName }}</h1>
										<div class="tag">
											<span>昵称：{{ state.userInfo.nickName }} </span>
											<span>毕业学校：{{ state.userInfo.university }}</span>
<!--											<span>意愿岗位：{{ state.userInfo.post }} </span>-->
<!--											<span style="color: red">您的工资：{{ state.userInfo.salary }}</span>-->
											<span style="color: #b2a565">您的角色：{{state.userInfo.role === 0 ? '普通用户' : '超级管理员'}}</span>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
						<el-button
							v-if="!UserLogin.isLogin"
							@click="login"
							size="large"
							:icon="Loading"
							round
							style="margin: 120px 120px"
							>我要 登录
						</el-button>
						<template v-if="UserLogin.isLogin" #footer>
							<el-button size="small" :icon="User" @click="to('/userInfo')"
								>个人中心</el-button
							>
							<el-button size="small" :icon="Promotion" @click="logout"
								>退出登录
							</el-button>
							<el-button
								size="small"
								v-if="state.userInfo.role === 1"
								:icon="User"
								@click="to('/adminIndex')"
								>后台管理
							</el-button>
						</template>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<div style="width: 1200px; margin: 0 auto">
			<AnimeHotImg title="畅销动漫" :item-list="state.hotList"></AnimeHotImg>
<!--			<AnimeRoundImg title="畅销漫画" :item-list="state.hotList"></AnimeRoundImg>-->
		</div>
<!--		<div style="width: 1200px" >-->
<!--			<el-space  wrap v-for="item in state.viewList">-->
<!--				<div style="width: 400px">-->
<!--					<init-order-item type="view" :cate-name="item.cateName"  :item-list="item.items"></init-order-item>-->
<!--				</div>-->
<!--			</el-space>-->
<!--		</div>-->

	</div>
</template>

<script setup lang="ts">
import AnimeHotImg from '~/components/item/AnimeHotImg.vue'
import { Loading, Promotion, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import InitOrderItem from '~/components/order/initOrderItem.vue'
const UserLogin = userLogin()
const router = useRouter()
const state = reactive(<any>{
	carouselList: [],
	userInfo: {},
	hotList: [],
	viewList:[]
})
function init() {
	//热门招聘
	http.get('/item/like?type=collect&sum=8').then((res) => {
		state.hotList = res.data
	})

	http.get("item/cateNameView").then(res =>{
		state.viewList = res.data
	})

	if (UserLogin.isLogin) {
		http.get('/user/userInfo').then((res) => {
			state.userInfo = res.data
		})
	}


	http.get(`/carousel`).then((res) => {
		state.carouselList = res.data
	})
}
init()

function to(href: string) {
	window.location.href = href
}

function login() {
	window.location.href = '/login'
}

/**
 * 退出登录
 */
function logout() {
	http.post('/user/logout').then(() => {
		router.push('/login')
		//清空
		UserLogin.token = undefined
		UserLogin.isLogin = false
	})
}
</script>
<style scoped>
.header {
	margin: 0 auto;
	margin-bottom: 20px;
}

:deep(.el-card__body) {
	padding: 0 0;
}
:deep(.el-card__footer) {
	padding-top: 10px;
}

.top {
	width: 100%;
	height: 248px;
	padding: 16px 20px;
}

.user-info {
	h1 {
		font-weight: 500;
		font-size: 20px;
		color: #222;
		margin-bottom: 18px;
	}
	.tag span {
		display: block;
		margin-bottom: 15px;
	}
}
</style>
